<template>
    <div class="TravelProgram">
        <div class="liuhai"></div>
        <div class="TravelProgram-header">
            <div>
                <i class="TravelProgram-icon" @click="$router.back()">&#xe600;</i>
            </div>
            <div>
                <p>出行方案</p>
            </div>
            <div></div>
        </div>
        <div class="TravelProgram-main">
            <ul class="TravelProgram-main-list">
                <li v-for="path in paths" @click="$router.push({
                path:'programdetails',
                query:path

                })" :key="path.path.id">
                    <div>
                        <img src="../../../assets/myCollect/img01.png" alt="">
                        <p v-if="path.path.daysCount==1">一日游</p>
                        <p v-if="path.path.daysCount==2">两日游</p>
                        <p v-if="path.path.daysCount==3">三日游</p>
                        <p v-if="path.path.daysCount==4">四日游</p>
                    </div>
                    <div>
                        <div>
                            <p v-text="path.path.title">
                            </p>
                        </div>
                        <div>
                            <p v-text="path.path.origin+'-'+path.path.destination">

                            </p>
                        </div>
                        <div>
                            <!--                            <p v-text="path.path.destination">双桥沟</p>-->
                        </div>
                        <div>
                            <div>&#165;450起</div>
                            <div>评分:5.0</div>
                        </div>
                    </div>
                </li>
                <li v-if="paths.length==0">暂无数据</li>
                <!--                <li @click="goTo('/programdetails')">-->
                <!--                    <div>-->
                <!--                        <img src="../../../assets/myCollect/ct002.png" alt="">-->
                <!--                        <p>三日游</p>-->
                <!--                    </div>-->
                <!--                    <div>-->
                <!--                        <div>-->
                <!--                            <p>-->
                <!--                                四姑娘山两日游自由行(无色山+喇嘛寺)-->
                <!--                            </p>-->
                <!--                        </div>-->
                <!--                        <div>-->
                <!--                            <p>-->
                <!--                                德阳出发-->
                <!--                            </p>-->
                <!--                        </div>-->
                <!--                        <div>-->
                <!--                            <p>双桥沟</p>-->
                <!--                            <p>长坪沟</p>-->
                <!--                        </div>-->
                <!--                        <div>-->
                <!--                            <div>&#165;660起</div>-->
                <!--                            <div>评分:4.8</div>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </li>-->
                <!--                <li @click="goTo('/programdetails')">-->
                <!--                    <div>-->
                <!--                        <img src="../../../assets/myCollect/ct003.png" alt="">-->
                <!--                        <p>四日游</p>-->
                <!--                    </div>-->
                <!--                    <div>-->
                <!--                        <div>-->
                <!--                            <p>-->
                <!--                                四姑娘山两日游自由行(现代冰川+攀登必经之路)-->
                <!--                            </p>-->
                <!--                        </div>-->
                <!--                        <div>-->
                <!--                            <p>-->
                <!--                                德阳出发-->
                <!--                            </p>-->
                <!--                        </div>-->
                <!--                        <div>-->
                <!--                            <p>双桥沟</p>-->
                <!--                            <p>长坪沟</p>-->
                <!--                            <p>海子沟</p>-->
                <!--                        </div>-->
                <!--                        <div>-->
                <!--                            <div>&#165;820起</div>-->
                <!--                            <div>评分:4.8</div>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </li>-->
            </ul>
        </div>
        <div class="TravelProgram-footer">
            <p>
                推荐方案
            </p>
            <hr>
            <ul>
                <li>
                    <img src="../../../assets/dzct2.png" alt="">
                    <p>三日游</p>
                    <p>[四姑娘山]三日游这样玩最嗨皮</p>
                </li>
                <li>
                    <img src="../../../assets/dzct3.png" alt="">
                    <p>两日游</p>
                    <p>[稻城亚丁]雪山脚下,是梦境中的绝美风景</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>



    export default {
        props:["path"],
        methods: {
            goTo(path) {
                this.$router.replace(path);
                console.log("1");
            }, createRoute(query) {
                this.axiosIns.get("/path/generate?timeEnd=" + query.timeEnd + "&origin=" + query.origin + "&timeStart=" + query.timeStart + "&description=" + query.destination).then((res) => {
                    let status = res.data.code;
                    if (status === 200) {
                        this.paths = res.data.data;
                        console.log(res.data.data[0]);
                    }
                }).catch(function (error) {
                    console.log(error);

                });
            },
        }, data() {
            return {
                paths: []
            }

        }, created() {
            let query = this.$route.query;
            this.createRoute(query);
        }
    }
</script>
<style scoped>
    /*字体图标样式*/
    .TravelProgram-icon {
        font-family: iconfont;
        font-style: normal;
        font-size: 36px;
    }

    .TravelProgram {
        background-color: white;
    }

    /*header部分*/
    .TravelProgram-header {
        width: 100%;
        height: 96px;
        display: flex;
        flex-direction: row;
    }

    .TravelProgram-header > div {
        width: 33%;
        height: 96px;
        display: flex;
    }

    .TravelProgram-header > div:nth-child(1) {
        justify-content: flex-start;
        align-items: center;
    }

    .TravelProgram-header > div:nth-child(1) > i {
        margin-left: 16px;
    }

    .TravelProgram-header > div:nth-child(2) {
        width: 34%;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        color: #44444a;
    }

    /*body部分*/
    .TravelProgram-main {
        width: 100%;
        height: 840px;
    }

    .TravelProgram-main-list {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .TravelProgram-main-list > li {
        width: 688px;
        height: 240px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        box-shadow: 2px 2px 3px #e6e6e6;
    }

    .TravelProgram-main-list > li > div:nth-child(1) {
        width: 260px;
        height: 240px;
        position: relative;
    }

    .TravelProgram-main-list > li > div:nth-child(1) > p {
        width: 100px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        background-color: #ec9b38;
        border-bottom-right-radius: 20px;
        border-top-left-radius: 20px;
        color: white;
        font-size: 22px;
        position: absolute;
    }

    .TravelProgram-main-list > li > div:nth-child(1) > img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        position: absolute;
    }

    .TravelProgram-main-list > li > div:nth-child(2) {
        width: 400px;
        height: 100%;
        margin-right: 8px;
        display: flex;
        flex-direction: column;
    }

    .TravelProgram-main-list > li > div:nth-child(2) > div:nth-child(1) {
        height: 92px;
        width: 400px;
    }

    .TravelProgram-main-list > li > div:nth-child(2) > div:nth-child(1) > p {
        height: 92px;
        width: 400px;
        font-size: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .TravelProgram-main-list > li > div:nth-child(2) > div:nth-child(2) {
        width: 100%;
        height: 26px;
    }

    .TravelProgram-main-list > li > div:nth-child(2) > div:nth-child(2) > p {
        width: 100%;
        height: 26px;
        line-height: 26px;
        font-size: 24px;
        color: #666666;
    }

    .TravelProgram-main-list > li > div:nth-child(2) > div:nth-child(3) {
        width: 100%;
        height: 130px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .TravelProgram-main-list > li > div:nth-child(2) > div:nth-child(3) > p {
        width: 100px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        border: #ec9b38 1px solid;
        color: #ec9b38;
        margin-right: 10px;
        border-radius: 6px;
    }

    .TravelProgram-main-list > li > div:nth-child(2) > div:nth-child(4) {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .TravelProgram-main-list > li > div:nth-child(2) > div:nth-child(4) > div {
        margin-bottom: 10px;
    }

    .TravelProgram-main-list > li > div:nth-child(2) > div:nth-child(4) > div:nth-child(1) {
        font-size: 32px;
        color: #ff4646;
    }

    .TravelProgram-main-list > li > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) {
        margin-right: 10px;
        font-size: 24px;
        color: #999999;
    }

    /*footer部分*/
    .TravelProgram-footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .TravelProgram-footer > p {
        width: 112px;
        height: 28px;
        font-size: 28px;
        line-height: 28px;
        color: #666666;
        margin-left: -530px;
    }

    .TravelProgram-footer > hr {
        width: 112px;
        height: 4px;
        background-color: #ec9b38;
        border: 0px;
        margin-left: -530px;
        margin-top: 2px;
    }

    .TravelProgram-footer > ul {
        width: 688px;
        height: 330px;
        margin-top: 20px;
        margin-left: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .TravelProgram-footer > ul > li {
        width: 330px;
        height: 330px;
        border-radius: 20px;
        position: relative;
    }

    .TravelProgram-footer > ul > li > img {
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .TravelProgram-footer > ul > li > p {
        position: absolute;
        color: white;
    }

    .TravelProgram-footer > ul > li > p:nth-child(2) {
        width: 100px;
        height: 36px;
        font-size: 22px;
        text-align: center;
        line-height: 36px;
        border-bottom-right-radius: 20px;
        border-top-left-radius: 20px;
        background-color: #ec9b38;
    }

    .TravelProgram-footer > ul > li > p:nth-child(3) {
        width: 312px;
        height: 66px;
        margin-left: 20px;
        margin-top: 240px;
        font-size: 26px;
    }
</style>